<template>
  <div class="fix-btn">
    <button v-if="cApprovalSw == 'Y'" class="blue-btn" @click="doOperate('Approval')">同意</button>
    <button v-if="cAddSw == 'Y'" class="white-btn" @click="doOperate('AddStep')">
      <span>+</span> 加签</button>
    <span v-if="cPushbackAllSw == 'Y'" class="reject-main">
      <button class="yellow-btn" @click="popGroup">驳回</button>
      <transition name="slide-fade">
        <span v-if="showGroup" class="reject-group">
          <button class="yellow-btn" @click="doOperate('PushAllback')">重走</button>
          <button class="yellow-btn" @click="doOperate('Pushback')">不重走</button>
        </span>
      </transition>
    </span>
  </div>
</template>

<script>
export default {
  props: {
    cApprovalSw: String,
    cDenySw: String,
    cPushbackAllSw: String,
    cAddSw: String
  },
  data() {
    return {
      showGroup: false
    }
  },
  created() {
    window.onclick = this.hideGroup
  },
  methods: {
    popGroup() {
      this.showGroup = !this.showGroup
      window.event.cancelBubble = true
    },
    doOperate(actionType) {
      this.$emit('doOperate', actionType)
      if (actionType == 'PushAllback' || actionType == 'Pushback') {
        this.showGroup = !this.showGroup
      }
      window.event.cancelBubble = true
    },
    hideGroup() {
      this.showGroup = false
    }
  }
}
</script>

<style type="text/scss" lang="scss">
.reject-main {
  position: relative;
  .reject-group {
    position: absolute;
    top: -80px;
    left: 0px;
    button {
      margin-bottom: 1px;
    }
  }
}
.slide-fade-enter-active {
  transition: all 0.1s ease;
}
.slide-fade-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateY(10px);
  opacity: 0;
}
</style>

